<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-demo:hello.a.b="message"></div>
    fff
    <div v-demo2="{ color: 'red', text: 'hello!' }"></div>
    <input type="checkbox" v-demo3="{zt:true}">
    <input type="checkbox" v-demo3="{zt:false}">
    <input type="checkbox" v-demo3="{zt:true}">
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
    Vue.directive('demo', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                    'name: ' + s(binding.name) + '<br>' +
                    'value: ' + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' +
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>' +
                    'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    })
    Vue.directive('demo2', function (el, binding) {
        console.log(binding.value.color) // => "red"
        console.log(binding.value.text)  // => "hello!"
        el.innerHTML=binding.value.text
        el.style.color = binding.value.color
    })
    Vue.directive('demo3', function (el, binding) {
        el.checked = binding.value.zt
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
    });
</script>
</body>
</html>
